<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>数据库对比结果报告</title>
	
	<script src="js/vue.js"></script>
	<link rel="stylesheet" href="js/element-ui/lib/theme-chalk/index.css">
	<script src="js/element-ui/lib/index.js"></script>
	<script src="js/axios.js"></script>
	
    <link rel="stylesheet" href="css/common.css">
    <link rel="stylesheet" href="css/report.css">
</head>
<body>
	<div id="app">
		<div class="header-panel">
			<div></div>
			<div><h2>{{title}}</h2></div>
			<div></div>
		</div>
		<div class="float-panel">
			<div>
				<el-tooltip effect="light" content="全部展开/收起" placement="left">
					<el-button type="primary" @click="closeColumn()" size="medium" icon="el-icon-d-caret">展开/收起</el-button>
				</el-tooltip>
			</div>
			<div>
				<el-tooltip effect="light" content="下载报告" placement="left">
					<el-button type="primary" @click="downloadImg()" size="medium" icon="el-icon-download">下载</el-button>
				</el-tooltip>
			</div>
		</div>
		<div class="container" id="postImg" ref="postImg" style="margin-top: 10px;">
			<div class="block-table extra" v-if="extraTableList && extraTableList.length > 0">
				<h3>变动库增加的表</h3>
				<!-- <label v-for="item in extraTableList">{{item}}</label> -->
				<el-tag size="medium" v-for="(item,index) in extraTableList" :key="index">{{item}}</el-tag>
			</div>
			<div class="block-table miss" v-if="missTableList && missTableList.length > 0">
				<h3>变动库缺失的表</h3>
				<!-- <label v-for="item in missTableList">{{item}}</label> -->
				<el-tag size="medium" v-for="(item,index) in missTableList" :key="index">{{item}}</el-tag>
			</div>
			<div class="block-table change" v-if="changeTableList && changeTableList.length > 0">
				<h3>变动库变化的表</h3>
				<!-- <span class="h3-right m-btn-text"  @click="closeColumn()"><i class="el-icon-d-caret"></i>全部展开/收起</span> -->
				<div v-for="item in changeTableList">
					<div class="block-head-column">
						<!-- <div><label>{{item.tableName}}</label></div> -->
						<div><el-tag size="medium">{{item.tableName}}</el-tag></div>
						<!-- el-icon-caret-top el-icon-caret-bottom -->
						<div><span class="m-btn-text"  @click="closeColumn(item)"><i :class="item.isClose == 1?'el-icon-caret-bottom':'el-icon-caret-top'"></i>{{item.isClose == 1 ? '展开':'收起'}}</span></div>
					</div>
					<div class="block-column" v-show="item.isClose != 1">
						<!-- <h4><span><label>{{item.tableName}}</label></span></h4> -->
						<div class="block-table miss" v-if="item.isChangeComment == 1">
							<h4>表注释变化</h4>
							<!-- <label v-for="item1 in item.extraColumnList">{{item1}}</label> -->
							<el-tag type="info">变动库：{{item.changeComment}}</el-tag>
							<el-tag type="info">目标库：{{item.targetComment}}</el-tag>
						</div>
						<div class="block-table extra" v-if="item.extraColumnList && item.extraColumnList.length > 0">
							<h4>增加的字段</h4>
							<!-- <label v-for="item1 in item.extraColumnList">{{item1}}</label> -->
							<el-tag v-for="(item1,index) in item.extraColumnList" :key="index" type="warning" size="medium">{{item1}}</el-tag>
						</div>
						<div class="block-table miss" v-if="item.missColumnList && item.missColumnList.length > 0">
							<h4>缺失的字段</h4>
							<!-- <label v-for="item1 in item.missColumnList">{{item1}}</label> -->
							<el-tag v-for="(item1,index) in item.missColumnList" :key="index" type="warning" size="medium">{{item1}}</el-tag>
						</div>
						<div class="block-table" v-if="item.columnInfoList && item.columnInfoList.length > 0">
							<h4>变动的字段</h4>
							<el-table :data="item.columnInfoList" stripe style="width: 100%">
								<el-table-column prop="fieldName" label="字段名称"></el-table-column>
								<el-table-column prop="isChangeFieldType" label="类型" width="70px">
									<template slot-scope="scope">
										<el-tooltip v-if="scope.row.isChangeFieldType == 1" effect="light" :content="getContent(scope.row, 'isChangeFieldType')" placement="top">
										  <i class="el-icon-info"></i>
										</el-tooltip>
									</template>
								</el-table-column>
								<el-table-column prop="isChangeLength" label="长度" width="70px">
									<template slot-scope="scope">
										<el-tooltip v-if="scope.row.isChangeLength == 1" effect="light" :content="getContent(scope.row, 'isChangeLength')" placement="top">
										  <i class="el-icon-info"></i>
										</el-tooltip>
									</template>
								</el-table-column>
								<el-table-column prop="isChangeSecondLength" label="小数位" width="70px">
									<template slot-scope="scope">
										<el-tooltip v-if="scope.row.isChangeSecondLength == 1" effect="light" :content="getContent(scope.row, 'isChangeSecondLength')" placement="top">
										  <i class="el-icon-info"></i>
										</el-tooltip>
									</template>
								</el-table-column>
								<el-table-column prop="isChangeNotNull" label="非空" width="70px">
									<template slot-scope="scope">
										<el-tooltip v-if="scope.row.isChangeNotNull == 1" effect="light" :content="getContent(scope.row, 'isChangeNotNull')" placement="top">
										  <i class="el-icon-info"></i>
										</el-tooltip>
									</template>
								</el-table-column>
								<el-table-column prop="isChangeUnsigned" label="无符号" width="70px">
									<template slot-scope="scope">
										<el-tooltip v-if="scope.row.isChangeUnsigned == 1" effect="light" :content="getContent(scope.row, 'isChangeUnsigned')" placement="top">
											<i class="el-icon-info"></i>
										</el-tooltip>
									</template>
								</el-table-column>
								<el-table-column prop="isChangeDefaultValue" label="默认值" width="70px">
									<template slot-scope="scope">
										<el-tooltip v-if="scope.row.isChangeDefaultValue == 1" effect="light" :content="getContent(scope.row, 'isChangeDefaultValue')" placement="top">
										  <i class="el-icon-info"></i>
										</el-tooltip>
									</template>
								</el-table-column>
								<el-table-column prop="isChangeComment" label="注释" width="70px">
									<template slot-scope="scope">
										<el-tooltip v-if="scope.row.isChangeComment == 1" effect="light" :content="getContent(scope.row, 'isChangeComment')" placement="top">
										  <i class="el-icon-info"></i>
										</el-tooltip>
									</template>
								</el-table-column>
							</el-table>
						</div>
						
						<div class="block-table extra" v-if="item.extraIndexList && item.extraIndexList.length > 0">
							<h4>增加的索引</h4>
							<el-tag v-for="(item1,index) in item.extraIndexList" :key="index" type="success" size="medium">{{item1}}</el-tag>
						</div>
						<div class="block-table miss" v-if="item.missIndexList && item.missIndexList.length > 0">
							<h4>缺失的索引</h4>
							<el-tag v-for="(item1,index) in item.missIndexList" :key="index" type="success" size="medium">{{item1}}</el-tag>
						</div>
						<div class="block-table" v-if="item.indexInfoList && item.indexInfoList.length > 0">
							<h4>变动的索引</h4>
							<el-table :data="item.indexInfoList" stripe style="width: 100%">
								<el-table-column prop="indexName" label="索引名称"></el-table-column>
								<el-table-column prop="isChangeIndexType" label="索引类型" width="100px">
									<template slot-scope="scope">
										<el-tooltip v-if="scope.row.isChangeIndexType == 1" effect="light" :content="getContent(scope.row, 'isChangeIndexType')" placement="top">
										  <i class="el-icon-info"></i>
										</el-tooltip>
									</template>
								</el-table-column>
								<el-table-column prop="isChangeNonUnique" label="能否重复" width="100px">
									<template slot-scope="scope">
										<el-tooltip v-if="scope.row.isChangeNonUnique == 1" effect="light" :content="getContent(scope.row, 'isChangeNonUnique')" placement="top">
										  <i class="el-icon-info"></i>
										</el-tooltip>
									</template>
								</el-table-column>
								<el-table-column prop="isChangeColumnName" label="作用列">
									<template slot-scope="scope">
										<el-tooltip v-if="scope.row.isChangeColumnName == 1" effect="light" :content="getContent(scope.row, 'isChangeColumnName')" placement="top">
										  <i class="el-icon-info"></i>
										</el-tooltip>
									</template>
								</el-table-column>
								<el-table-column prop="isChangeIndexComment" label="注释">
									<template slot-scope="scope">
										<el-tooltip v-if="scope.row.isChangeIndexComment == 1" effect="light" :content="getContent(scope.row, 'isChangeIndexComment')" placement="top">
										  <i class="el-icon-info"></i>
										</el-tooltip>
									</template>
								</el-table-column>
							</el-table>
						</div>
					</div>
				</div>
			</div>
		</div>
		<iframe src="component/footer.html" onload="this.before((this.contentDocument.body||this.contentDocument).children[0]);this.remove()"></iframe>
	</div>
	
	<script src="js/html2canvas.min.js"></script>
	<script src="js/utils.js"></script>
	<script>
		let that = new Vue({
			el: '#app',
			data: function () {
				return {
					title: "数据库差异报告",
					isDoCloseAll: 1,
					loading:false,
					extraTableList:[],
					missTableList:[],
					changeTableList:[],
					tableData: [{
						index: 1,
					    name: '王小虎',
					    host: '127.0.0.1',
						port: 3306,
						userName: 'root',
						password: '123',
						database: 'school',
					}],
				}
			},
			methods: {
				downloadImg(){
					// 参考：https://www.jianshu.com/p/22bd5b98e38a
					html2canvas(this.$refs.postImg, {
						allowTaint: true,
						taintTest: false,
						useCORS: true,
						scrollY: 0,
						scrollX: 0,
						width: this.$refs.postImg.clientWidth,
						height: this.$refs.postImg.clientHeight,
						scale: 2.5,
					}).then(canvas => {
						// 转成图片，生成图片地址
						let imgUrl = canvas.toDataURL('image/png');
						const eleLink = document.createElement('a');
						eleLink.href = imgUrl; // 转换后的图片地址
						eleLink.download = that.title;
						// 触发点击
						document.body.appendChild(eleLink);
						eleLink.click();
						// 然后移除
						document.body.removeChild(eleLink);
					});
				},
				getReport(changeKey, targetKey){
					axios.get(`${baseUrl}/api/getReport?changeKey=${changeKey}&targetKey=${targetKey}`).then(response => {
						console.log(response.data);
						let result = response.data.result;
						this.extraTableList = result.extraTableList;
						this.missTableList = result.missTableList;
						this.changeTableList = result.changeTableList;
					}).catch(error => {
						console.log(error);
					})
				},
				getContent(row, type){
					let separate = " 变动为 ";
					if (type == 'isChangeFieldType') {
						return row.targetFieldType + separate + row.changeFieldType;
					} else if (type == 'isChangeLength') {
						return row.targetLength + separate + row.changeLength;
					} else if (type == 'isChangeDefaultValue') {
						return row.targetDefaultValue + separate + row.changeDefaultValue;
					} else if (type == 'isChangeSecondLength') {
						return row.targetSecondLength + separate + row.changeSecondLength;
					} else if (type == 'isChangeNotNull') {
						return row.targetNotNull + separate + row.changeNotNull;
					} else if (type == 'isChangeComment') {
						return row.targetComment + separate + row.changeComment;
					} else if (type == 'isChangeUnsigned') {
						return row.targetUnsigned + separate + row.changeUnsigned;
					} else if (type == 'isChangeNonUnique') {
						return row.targetNonUnique + separate + row.changeNonUnique;
					} else if (type == 'isChangeColumnName') {
						return row.targetColumnName + separate + row.changeColumnName;
					} else if (type == 'isChangeIndexType') {
						return row.targetIndexType + separate + row.changeIndexType;
					} else if (type == 'isChangeIndexComment') {
						return row.targetIndexComment + separate + row.changeIndexComment;
					}
					return "";
				},
				setTitle(changeKey, targetKey){
					axios.get(`${baseUrl}/api/list`).then(response => {
						let tableData = response.data.result;
						let changeObj, targetObj;
						for (let i=0; i<tableData.length; i++) {
							if (tableData[i].key == changeKey) {
								changeObj = tableData[i];
							}
							if (tableData[i].key == targetKey) {
								targetObj = tableData[i];
							}
						}
						this.title = changeObj.name + "和" + targetObj.name + this.title;
					}).catch(error => {
						console.log(error);
					})
				},
				closeColumn(tableItem){
					console.log(tableItem);
					if (tableItem) {
						tableItem.isClose = tableItem.isClose == 1 ? 0 : 1;
					} else {
						for (let i=0; i<this.changeTableList.length; i++) {
							this.changeTableList[i].isClose = this.isDoCloseAll;
						}
						this.isDoCloseAll = this.isDoCloseAll == 1 ? 0 : 1;
					}
				}
			},
			mounted() {
				let changeKey = getUrlParam("changeKey");
				let targetKey = getUrlParam("targetKey");
				this.getReport(changeKey, targetKey);
				this.setTitle(changeKey, targetKey);
			}
		})
	</script>
</body>
</html>
